import React, { Component } from 'react';

import "../../styles/regist/MyForm.css"
import { userRegist } from "../../api/regist"
import { withRouter } from "react-router-dom"
import { Toast } from 'antd-mobile'


class MyForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: "",
            pass: "",
            agree: false
        }
    }

    mychange(e) {
        this.setState({
            [e.target.name]: e.target.type === "checkbox" ? e.target.checked : e.target.value
        })
    }

    myback() {
        this.props.history.goBack()
    }

    myclick() {
        if (this.state.agree) {
            if (/^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(this.state.phone)) {
                // console.log(this.state.phone, this.state.pass);
                userRegist({ phone: this.state.phone, pass: this.state.pass }).then((res) => {
                    console.log(res);
                    if (res.data.msg === "注册成功") {
                        Toast.show({
                            icon: 'success',
                            content: '注册成功',
                        })
                        // this.props.history.push("/login")
                        this.setState({ phone: "", pass: "", })
                    }
                })
            } else {
                alert("请检查账号格式")
            }

        } else {
            alert("请勾选用户协议")
        }

    }



    render() {
        return (
            <div className='registform'>
                <h2>用户注册</h2>
                <div className='username'>
                    <input name='phone' type="text" placeholder='请输入用户名' value={this.state.phone} onChange={(e) => { this.mychange(e) }} />
                </div>
                <div className='pass'>
                    <input name='pass' type="password" placeholder='请输入密码' value={this.state.pass} onChange={(e) => { this.mychange(e) }} />
                </div>
                <div className='check'>
                    <input name='agree' type="checkbox" checked={this.state.agree} onChange={(e) => { this.mychange(e) }} />请先勾选用户协议
                </div>
                <div className='registbtn'>
                    <input name='registbtn' type="button" placeholder='注册' onClick={() => { this.myclick() }} value="用户注册" />
                </div>
                <span onClick={() => { this.myback() }}>返回登录页</span>
            </div>
        );
    }
}

export default withRouter(MyForm);